<template>
  <div class="setting-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <!-- 左侧 -->
          <el-tab-pane label="角色管理">
            <!-- 按钮 -->
            <el-button
              icon="el-icon-plus"
              size="small"
              type="primary"
              @click="isShowAddBox=true"
            >新增角色</el-button>
            <!-- 表格 -->
            <el-table v-loading="loading" :data="roleList">
              <el-table-column :index="handleIndex" type="index" label="序号" width="100" />
              <el-table-column label="角色名称" width="240" prop="name" />
              <el-table-column label="描述" prop="description" />
              <el-table-column label="操作">
                <template v-slot="{row}">
                  <el-button size="small" type="success" @click="handleAuth(row.id)">分配权限</el-button>
                  <el-button size="small" type="primary" @click="getRoleDetail(row.id)">编辑</el-button>
                  <el-button size="small" type="danger" @click="handelDel(row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              :page-sizes="[2,10, 20, 30, 40]"
              :current-page="queryData.page"
              layout="sizes,prev, pager, next,jumper"
              :total="total"
              @current-change="changePage"
              @size-change="changeSize"
            />
          </el-tab-pane>

          <el-tab-pane label="公司信息">
            <!-- 公司信息 -->
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <!-- 新增角色弹层 -->
    <el-dialog :title="title" :visible.sync="isShowAddBox" @close="close">
      <el-form ref="roleForm" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item prop="description" label="角色描述">
          <el-input v-model="form.description" placeholder="请输入角色描述" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="handelCancel">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </template>
    </el-dialog>
    <!-- 分配权限的弹层 -->
    <el-dialog title="分配权限" :visible.sync="showAuthDialog" @open="getPermissionList" @close="showAuthDialog=false">
      <div>
        <!-- 分别通过default-expanded-keys和default-checked-keys设置默认展开和默认选中的节点。
        需要注意的是，此时必须设置node-key，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。
        default-expand-all	是否默认展开所有节点 布尔值默认false
        default-checked-keys	默认勾选的节点的 key 的数组	array
        label	指定节点标签为节点对象的某个属性值	string, function(data, node)
        disabled	指定节点选择框是否禁用为节点对象的某个属性值	boolean, function(data, node)
        children	指定子树为节点对象的某个属性值	string
        show-checkbox	节点是否可被选择	boolean
        check-strictly	在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
        node-key	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
        setCheckedKeys	通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性
        (keys, leafOnly) 接收两个参数，
            1. 勾选节点的 key 的数组
            2. boolean 类型的参数，若为 true 则仅设置叶子节点的选中状态，默认值为 false-->
        <el-tree
          ref="myTree"
          :data="permissionData"
          :props="{ label: 'name' }"
          :show-checkbox="true"
          :default-expand-all="true"
          :check-strictly="true"
          node-key="id"
        />
        <!--
          show-checkbox
          node-key="id"
          :default-expand-all="true"
          :default-checked-keys="[5]"
          :props="defaultProps"
         -->
      </div>
      <template #footer>
        <div style="text-align: right;">
          <el-button @click="showAuthDialog=false">取消</el-button>
          <el-button type="primary" @click="handleAuthSubmit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { translateListToTreeData } from '@/utils'
import {
  reqGetRoleList,
  reqDeleteRole,
  reqAddRole,
  reqGetRoleDetail,
  reqUpdateRole, reqAssignPerm } from '@/api/setting.js'
import { reqGetPermissionList } from '@/api/permission'
export default {
  name: 'Setting',
  data() {
    return {
      defaultAuthIdList: [], // 存储已选中的权限id列表
      permissionData: [], // 存储权限数据
      roleId: '', // 记录正在操作的角色
      // 分配权限弹窗
      showAuthDialog: false,
      form: {
        name: '',
        description: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入角色名称', trigger: ['blur', 'change'] }
        ]
      },
      isShowAddBox: false,
      loading: false,
      roleList: [],
      // 分页参数
      queryData: {
        page: 1,
        pagesize: 10
      },
      total: 0
    }
  },
  computed: {
    title() {
      return this.form.id ? '编辑角色' : '添加角色'
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    async handleAuthSubmit() {
      try {
        const ret = await reqAssignPerm({
        // 当前的角色id
          id: this.roleId,
          // 选中权限点的节点（id）
          permIds: this.$refs.myTree.getCheckedKeys()
          // 获取树的选中的节点方式：this.$refs.myTree.getCheckedKeys() 检查选中的keys
        })
        if (ret.success) {
        // 分配角色的权限成功 关闭弹窗 清空权限数据
          this.$refs.myTree.setCheckedKeys([])
          this.showAuthDialog = false
          this.permissionData = []
        }
      } catch {
        this.$message.error('分配角色权限失败')
      }
    },
    // 获取权限列表数据函数
    async getPermissionList() {
      // try {
      //   const ret = await reqGetPermissionList()
      //   if (ret.success) {
      //     console.log(this.$refs.myTree)
      //     this.permissionData = translateListToTreeData(ret.data, '0')
      //   } else {
      //     this.$message.error(ret.message)
      //   }
      // } catch {
      //   this.$message.error('获取权限列表失败')
      // }

      const ret1 = reqGetPermissionList()
      const ret2 = reqGetRoleDetail(this.roleId)
      Promise.all([ret1, ret2]).then(result => {
        // 需要把后端返回的原始的列表数据转换为树形结构
        this.permissionData = translateListToTreeData(result[0].data, '0')
        const defaultAuth = result[1].data.permIds
        this.$refs.myTree.setCheckedKeys(defaultAuth)
      }).catch(() => {
        this.$message.error('获取权限失败')
      })
    },
    // 给角色分配权限 给指定角色进行授权
    handleAuth(id) {
      this.roleId = id
      this.showAuthDialog = true
    },
    close() {
      this.$refs.roleForm.resetFields()
      this.form = this.$options.data().form
    },
    // 编辑角色
    async getRoleDetail(i) {
      try {
        const ret = await reqGetRoleDetail(i)
        if (ret.code === 10000) {
          this.isShowAddBox = true
          this.form = ret.data
        }
      } catch {
        this.$message.error('获取角色信息失败')
      }
    },
    handelCancel() {
      this.isShowAddBox = false
      this.$refs.roleForm.resetFields()
    },
    async handleSubmit () {
      // 添加角色和编辑角色提交表单
      if (this.form.id) {
        // 编辑角色
        try {
          const ret = await reqUpdateRole(this.form)
          if (ret.code === 10000) {
            // 编辑成功，关闭弹窗，刷新列表
            this.isShowAddBox = false
            this.getRoleList()
          }
        } catch {
          this.$message.error('编辑角色失败')
        }
      } else {
        // 添加角色
        try {
          const ret = await reqAddRole(this.form)
          if (ret.code === 10000) {
            // 添加成功，关闭弹窗，刷新列表
            this.isShowAddBox = false
            this.getRoleList()
          }
        } catch {
          this.$message.error('添加角色失败')
        }
      }
    },
    async handelDel(id) {
      try {
        const res = await this.$confirm('确认要删除角色吗？, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        if (res === 'cancel') return
        const ret = await reqDeleteRole(id)
        if (ret.code === 10000) {
          this.$message.success('删除角色成功')
          if (this.roleList.length <= 1) {
            this.queryData.page--
          }
          this.getRoleList()
        }
      } catch {
        this.$message.error('删除角色失败')
      }
    },
    handleIndex(index) {
      const { page, pagesize } = this.queryData
      return (page - 1) * pagesize + 1 + index
    },
    changeSize(size) {
      // 重新初始化page
      this.queryData.page = 1
      this.queryData.pagesize = size
      this.getRoleList()
    },
    changePage(page) {
      this.queryData.page = page
      this.getRoleList()
    },
    async getRoleList() {
      try {
        this.loading = true
        const ret = await reqGetRoleList(this.queryData)
        if (ret.code === 10000) {
          this.roleList = ret.data.rows
          this.total = ret.data.total
          // console.log(ret)
        }
      } catch {
        this.$message.error('获取角色列表失败')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style>

</style>
